<template>
	<view class="">
		<uni-popup ref="popup" type="center" border-radius="10px">
			<view class="gl-container" style="background-color: #f1f1f1;">
				<view class="gl-header">
					<view class="gl-header-left">
						<text>{{title}}</text>
					</view>
					<view class="gl-header-right">
						<uni-icons type="closeempty" size="16" color="#fff" class="gl-button-icon" @tap="eventClose"
							style="background-color: #dd524d;padding: 2px;border-radius: 2px;"></uni-icons>
					</view>
				</view>

				<view class="gl-body" style="display: flex;gap: 10px;padding: 10px;">
					<view style="display: flex;flex-direction: column;gap: 10px;">
						<label for="">选择群主</label>
						<uni-data-checkbox mode="list" icon="left" v-model="curData.owner" :localdata="curStaff"
							emptyText="未找到成员" :map="{text:'name',value:'userid'}"
							@change="checkboxChange"></uni-data-checkbox>
					</view>
					<view style="display: flex;flex-direction: column;gap: 10px;">
						<uni-easyinput type="text" v-model="curData.name">
							<template #left>
								<view class="gl-item-title">名称:</view>
							</template>
						</uni-easyinput>
						<uni-easyinput type="text" v-model="curData.chatid" :disabled="true">
							<template #left>
								<view class="gl-item-title">群组ID:</view>
							</template>
						</uni-easyinput>
						<view class="" style="flex: 1;"></view>
						<view class="" style="display: flex;gap: 10px;justify-content: flex-end;">
							<view class="gl-button gl-button-base" @tap="eventSubmit">
								<uni-icons type="checkmarkempty" size="18" color="#fff"></uni-icons>
								<text style="font-size: small;">保存</text>
							</view>
							<view class="gl-button gl-button-warning" @tap="eventClose">
								<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
								<text style="font-size: small;">取消</text>
							</view>
						</view>
					</view>

				</view>

				<view class="gl-footer"> </view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				sConf: getApp().globalData,
				title: '创建业务群组',
				curStaff: [{
					name: 'test1',
					userid: 'test1'
				}, {
					name: 'test2',
					userid: 'test2'
				}],
				curData: {
					name: null, // 名称
					chatid: null, // ID
					owner: null, // 群主
					userlist: [] // 成员
				}
			}
		},
		methods: {
			open(e) {
				console.log('open', e);
				this.curStaff = JSON.parse(JSON.stringify(e))
				this.curData.chatid = this.zipString()
				let tmpData = []
				this.curStaff.forEach(item => {
					tmpData.push(item.userid)
				})
				this.curData.userlist = tmpData
				this.$refs.popup.open()
			},
			eventClose() {
				this.$refs.popup.close()
			},
			eventSubmit() {
				if (!this.curData.name) {
					uni.showModal({
						title: '错误',
						content: '需要提供一个名称',
						showCancel: false
					})
					return
				}
				if (!this.curData.owner) {
					uni.showModal({
						title: '错误',
						content: '需要选定一个群主',
						showCancel: false
					})
					return
				}
				console.log('eventSubmit', this.curData);
				let that = this
				uni.showModal({
					title: '询问',
					content: '是否要创建一个' + that.curData.name + '业务群',
					success(r) {
						if (r.confirm) {
							that.loadWxChatCreated(that.curData).then(res => {
								that.refresh()
								that.eventClose()
							}).catch(err => {
								console.log('创建失败', err);
								uni.showToast({
									title: '创建失败'
								})
							})
						}
					}
				})
			},
			zipString() {
				/*生成32位随机流水号*/
				/*默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1*/
				var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
				var maxPos = $chars.length;
				var pwd = '';
				for (let i = 0; i < 32; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd
			},
			refresh() {
				this.$emit('refresh')
			},
			checkboxChange(e) {
				console.log('checkboxChange', e);
			},
			loadWxChatCreated(e) {
				let host = this.sConf.host + '/admin/chatCreate/';
				let token = this.sConf.auth.token || '';
				let data = e
				return new Promise((resolve, reject) => {
					psMethod.authenticatorPostSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gl-item-title {
		padding-left: 5px;
		color: #007aff;
		font-weight: bold;
	}
</style>